import React from 'react';
import {AbsoluteFill, spring, useCurrentFrame, useVideoConfig} from 'remotion';

export const Cover: React.FC = () => {
	const {fps} = useVideoConfig();
	const frame = useCurrentFrame();

	const prog = (num: number) =>
		spring({
			fps,
			frame,
			config: {
				damping: 200,
			},
			from: 1,
			to: 0,
			delay: num,
		});

	return (
		<AbsoluteFill
			style={{
				background: '#21272F',
				top: prog(0) * 100 + '%',
			}}
			className="flex justify-center items-center"
		>
			<svg
				viewBox="0 0 733 753"
				fill="none"
				style={{
					height: 200,
					marginTop: prog(4) * 1000 + 'px',
				}}
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					d="M208.166 80.1331C195.677 80.8064 185.612 82.7745 175.469 86.6074C170.411 88.4978 162.119 92.6155 157.556 95.4642C138.47 107.351 123.921 125.22 116.333 146.015C114.821 150.133 110.727 163.263 108.094 172.301C90.5456 232.719 80.5853 298.783 78.4472 368.705C78.1083 379.841 78.1083 406.36 78.4472 417.314C79.8813 463.67 84.34 505.52 92.423 548.198C95.7083 565.472 100.975 588.676 104.026 599.216C110.258 620.633 122.982 638.864 141.077 652.227C153.202 661.188 166.969 667.196 182.222 670.148C189.575 671.572 199.275 672.22 206.419 671.754C216.301 671.106 235.909 668.491 251.841 665.668C323.649 652.952 389.982 630.189 450.135 597.61C488.229 576.97 520.796 554.621 552.215 527.507C583.53 500.522 610.23 471.491 633.723 438.912C639.172 431.376 641.91 426.974 644.648 421.432C651.688 407.137 655 392.919 654.973 377.018C654.973 362.205 652.157 349.049 646.082 335.583C643.162 329.083 640.372 324.421 634.114 315.564C611.065 282.96 585.486 254.55 554.301 226.944C505.96 184.162 448.544 149.071 384.428 123.096C370.53 117.477 356.841 112.53 340.362 107.17C305.475 95.8527 262.296 86.0377 225.766 81.1431C220.03 80.3661 212.234 79.9258 208.166 80.1331Z"
					fill="white"
					fill-opacity="0.3"
				/>
				<path
					d="M165.171 0.0649414C149.299 0.920593 136.509 3.42175 123.619 8.29248C117.191 10.6949 106.654 15.9277 100.855 19.5479C76.6004 34.6537 58.1109 57.3618 48.4686 83.7887C46.5467 89.0214 41.3445 105.707 37.9978 117.193C15.6978 193.972 3.04016 277.926 0.323069 366.784C-0.10769 380.935 -0.10769 414.636 0.323069 428.557C2.14551 487.466 7.81163 540.649 18.0836 594.885C22.2586 616.836 28.9519 646.324 32.8287 659.718C40.7481 686.935 56.9181 710.104 79.9139 727.086C95.3218 738.473 112.817 746.108 132.201 749.86C141.545 751.67 153.872 752.492 162.951 751.9C175.509 751.077 200.427 747.753 220.672 744.166C311.927 728.007 396.223 699.079 472.666 657.678C521.076 631.448 562.462 603.047 602.39 568.59C642.186 534.297 676.116 497.405 705.971 456.004C712.896 446.427 716.376 440.832 719.855 433.789C728.801 415.623 733.009 397.555 732.976 377.348C732.976 358.524 729.398 341.805 721.677 324.692C717.966 316.431 714.421 310.508 706.468 299.252C677.177 257.818 644.671 221.716 605.041 186.633C543.608 132.266 470.645 87.6721 389.165 54.6631C371.504 47.5216 354.108 41.2357 333.167 34.4233C288.832 20.0415 233.96 7.56854 187.537 1.34851C180.247 0.361206 170.34 -0.198364 165.171 0.0649414Z"
					fill="white"
					fill-opacity="0.1"
				/>
				<path
					d="M252.666 163.18C243.684 163.664 236.446 165.08 229.152 167.836C225.515 169.196 219.552 172.157 216.27 174.206C202.545 182.754 192.082 195.604 186.625 210.559C185.537 213.52 182.594 222.962 180.7 229.462C168.08 272.911 160.917 320.42 159.38 370.704C159.136 378.712 159.136 397.783 159.38 405.661C160.411 438.997 163.618 469.093 169.43 499.785C171.793 512.207 175.581 528.894 177.775 536.474C182.256 551.875 191.407 564.986 204.42 574.596C213.139 581.04 223.039 585.361 234.009 587.484C239.297 588.508 246.272 588.974 251.41 588.639C258.516 588.173 272.617 586.292 284.074 584.262C335.714 575.118 383.417 558.747 426.675 535.319C454.071 520.476 477.491 504.404 500.086 484.905C522.605 465.499 541.806 444.622 558.701 421.193C562.62 415.773 564.589 412.607 566.558 408.622C571.621 398.342 574.002 388.117 573.983 376.682C573.983 366.03 571.958 356.569 567.589 346.884C565.489 342.21 563.483 338.858 558.982 332.488C542.407 309.041 524.012 288.611 501.586 268.758C466.821 237.992 425.532 212.757 379.423 194.077C369.429 190.036 359.584 186.479 347.734 182.623C322.645 174.485 291.593 167.426 265.323 163.907C261.198 163.348 255.591 163.031 252.666 163.18Z"
					fill="white"
				/>
			</svg>
		</AbsoluteFill>
	);
};
